<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>直播间首页</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../../Public/css/swiper.min.css">
    <link rel="stylesheet" href="../css/livestu.css">
</head>
<body class="room-index">
<div class="mui-bar mui-bar-tab room-index-tab">
    <a href="javascript:void(0);" class="mui-tab-item mui-active">
        <span class="iconfont icon-shouye"></span>
        <span class="mui-tab-label">直播间主页</span>
    </a>
    <a href="usercenter.html" class="mui-tab-item division-left">
        <span class="iconfont icon-wode"></span>
        <span class="mui-tab-label">个人中心</span>
    </a>
</div>
<div class="mui-content room-index-content">
    <ul class="mui-table-view user">
        <li class="mui-table-view-cell mui-media">
            <img class="mui-media-object mui-pull-left" src="../images/user.jpeg">
            <div class="mui-media-body">
                幸福的直播间<i class="iconfont icon-renzheng1 renzhengPop"></i>
                <p class='mui-ellipsis'><span>1</span>人关注</p>
            </div>
            <p class="follow-btn r-pos"><span class="iconfont icon-add"></span> 关注</p>
        </li>
    </ul>
    <!-- 轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../images/banner1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/banner2.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- 直播间操作 -->
    <div class="mui-row option-wrap">
        <a href="furture_course.html" class="mui-col-xs-4">
            <i class="iconfont icon-kechengbiao"></i>
            <div class="class_text">课表</div>
        </a>
        <a href="vip_intro.html" class="mui-col-xs-4">
            <i class="iconfont icon-huiyuan"></i>
            <div class="class_text">会员</div>
        </a>
        <a href="live_room_info.html" class="mui-col-xs-4">
            <i class="iconfont icon-xiangmujieshao"></i>
            <div class="class_text">简介</div>
        </a>
    </div>
    <!-- 最新动态 -->
    <h5 class="rec-top m-t">
        <span class="text-15 bl-red color-333">最新动态</span>
        <a href="classroom_dynamic.html" title="" class="mui-navigate-right mui-pull-right p-r-lg color-999 text-13">查看全部</a>
    </h5>
    <div class="dynamic-list">
        <ul class="reclist">
            <li><a href="classroom_dynamic.html" title=""><span class="rec">推荐</span>大四前，你需要了解的简历课</a></li>
            <li><a href="classroom_dynamic.html" title=""><span class="rec">推荐</span>达三千，你需要了解的简历课哈哈哈哈哈哈或啊哈哈哈</a></li>
        </ul>
    </div>
    <!-- 系列课 -->
    <h5 class="rec-top m-t">
        <span class="text-15 bl-warnning color-333">系列课</span>
    </h5>
    <div class="series-list">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
               <a href="javascript:;">
                   <img class="mui-media-object mui-pull-left seriesImg" src="../images/img_01.jpg">
                   <div class="mui-media-body">
                       <div class="seriesTitle mui-ellipsis-2">心想事成100天线上成长营</div>
                       <p class='mui-ellipsis m-t'>
                           <span class="mui-pull-left text-mini">12.2万次学习</span>
                           <span class="mui-pull-right color-red text-13">￥21.60</span>
                        </p>
                   </div>
               </a>
           </li>
           <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                  <img class="mui-media-object mui-pull-left seriesImg" src="../images/img_01.jpg">
                  <div class="mui-media-body">
                      <div class="seriesTitle mui-ellipsis-2">心想事成100天线上成心想事成100天线上成长营长营心想事成100天线上成长营</div>
                      <p class='mui-ellipsis m-t'>
                           <span class="mui-pull-left text-mini">12.2万次学习</span>
                           <span class="mui-pull-right"><del class="text-mini color-999">￥99.00</del><i class="cuxiao text-mini">促</i><i class="color-red text-13">￥21.60</i></span>
                      </p>
                  </div>
              </a>
          </li>
        </ul>
    </div>
    <!-- 单次课 -->
    <h5 class="rec-top m-t">
        <span class="text-15 bl-blue color-333">单次课</span>
        <p class="mui-pull-right">
            <a href="javascript:;" class="iconfont icon-huanyihuan color-999 changes"></a>
        </p>
    </h5>
    <div class="course-list">
        <ul class="mui-table-view hot-cell">
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-pull-left mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            <span class="shipin-icon"><i class="iconfont icon-sdiantai"></i>音频</span>
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="color-999 m-t-md">
                            <span class="color-red text-mini"><i class="iconfont icon-shizhong color-red"></i> 两天后</span>
                            <span class="color-999 text-mini">12.2w人次学习</span>
                            <span class="color-red mui-pull-right text-13">￥21.60</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="" title="">
                    <img class="mui-pull-left mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="color-999 m-t-md">
                            <span class="jinxing text-mini">&bull; 进行中</span>
                            <span class="color-999 text-mini">12.2w人次学习</span>
                            <span class="color-green mui-pull-right text-13">免费</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="" title="">
                    <img class="mui-pull-left mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            <span class="shipin-icon"><i class="iconfont icon-shipin"></i>视频</span>匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="color-999 text-mini m-t-sm">2017-20-20 8:00</p>
                        <p>
                            <span class="color-999 text-mini">12.2w人次学习</span>
                            <span class="color-green mui-pull-right text-13">免费</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
        <a class="color-999 bg-whtie text-14 get-more" href="#">查看更多</a>
    </div>
</div>
<!-- <div class="renzheng-pop common-pop">
    <p class="m-t"><img src="../images/yishiming.jpg" alt=""></p>
    <p class="color-green m-t">已通过实名认证</p>
</div> -->
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script src="../../Public/libs/swiper-3.4.2.min.js" charset="utf-8"></script>
<script src="../../Public/libs/layer/layer.js" charset="utf-8"></script>
<link src="../../Public/libs/layer/need/layer.css" rel="stylesheet">
<script type="text/javascript">
    mui('.mui-bar-tab').on('tap','a',function(){
        location.href = this.getAttribute('href');
    })
    var bannerswiper = new Swiper('.swiper-container',{
        autoplay: 4000,
        pagination : '.swiper-pagination',
    })
    var lay1;
    $('.mui-content').on('click','.renzhengPop',function(){
        var str = `<div class="renzheng-pop mui-text-center rel">
        <div class="close-tip"><i class="iconfont icon-cuo"></i></div>
            <p><img src="../images/yishiming.jpg" alt=""></p>
            <p class="color-green m-t">已通过实名认证</p>
        </div>`;
        //自定页
        lay1 = layer.open({
          type: 1,
          skin: 'renzheng-pop common-pop', //样式类名
          closeBtn: 1, //不显示关闭按钮
          anim: 2,
          shadeClose: true, //开启遮罩关闭
          content: str
        });
    });
    $('body').on('click','.close-tip',function(){
        layer.close(lay1);
    });
</script>
</html>
